<template>
  <div class="app-container">
   <!-- 搜索区 -->
   <el-form :model="queryParams" ref="queryForm" :inline="true">
     <el-form-item label="用户名称" prop="loginName">
       <el-input  v-model="queryParams.loginName"
         placeholder="请输入用户名称" clearable size="small" style="width: 240px"  />
    </el-form-item>

    <el-form-item label="状态" prop="status">
        <el-select  v-model="queryParams.status" placeholder="状态" clearable
            size="small" style="width: 240px" >
            <el-option v-for="item in statusList"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"  />
            </el-select>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
   </el-form>

   <!--功能区 -->

   <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button
             type="primary"
             plain
             icon="el-icon-plus"
             size="mini"
             @click="addForm"
           >新增</el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button
             type="success"
             plain
             icon="el-icon-edit"
             size="mini"
           >修改</el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button
             type="danger"
             plain
             icon="el-icon-delete"
             size="mini"
           >删除</el-button>
         </el-col>

    </el-row>

    <!-- 数据表格显示-->

    <el-table v-loading="loading" :data="tableData" >
        <!-- 全选框 -->
        <el-table-column type="selection" width="55" align="center" />

         <el-table-column label="编号" prop="id" width="120" />

        <el-table-column label="用户账号" prop="loginName" :show-overflow-tooltip="true" width="250" />

        <el-table-column label="状态"   width="180" >
          <template slot-scope="scope">
            <el-switch
                      v-model="scope.row.status"
                      :active-value="0"
                      :inactive-value="1"
                      @change="handleStatusChange(scope.row)"
                    ></el-switch>
           </template>

        </el-table-column>

    </el-table>

    <!-- 分页条 -->
    <el-pagination
         v-if="total>0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-sizes="[5,10, 20,50,100 ]"
          :page-size="queryParams.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
    </el-pagination>

    <!-- 编辑对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :before-close="cancel" :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="登录账户" prop="loginName">
          <el-input v-model="form.loginName" placeholder="请输入登录账户" />
        </el-form-item>

        <el-form-item label="登录密码" prop="loginPwd">
          <el-input v-model="form.loginPwd" placeholder="请输入登录密码" />
        </el-form-item>

        <el-form-item label="确认密码" prop="loginNameConfirm">
          <el-input v-model="form.loginNameConfirm" placeholder="请再次输入密码" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
            <el-select  v-model="form.status" placeholder="状态" clearable
                size="small" style="width: 240px" >
                <el-option v-for="item in statusList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"  />
                </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>

    </el-dialog>


  </div>


</template>

<script>
  import {list, userStatus ,existsName ,save} from '@/api/user.js'
  export default {
    // 初始化私有变量
    data(){
      // 验证两次输入的密码是否一致的函数
      var validatePass2 = (rule, value, callback) => {
          if (value !== this.form.loginPwd) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
      };

      var uniqueName=(rule, value, callback) => {
           const params={}
           params["id"]=this.form.id
           params["loginName"]= value

           existsName(params).then(resp => {
             if( resp.data){
               callback(new Error( resp.data));
             }else{
               callback();
             }
           })
      };

      return {
        // 查询框参数
        queryParams: {
          loginName: undefined,
          status: undefined,
          page: 1,
          size: 5
        },
        // 状态列表
        statusList:[],
        // 加载条要不要显示
        loading: false,
        // table显示的数据定义
        tableData: [],
        total: 0,
        title: '新增数据',
        open: false,
        form: {
          loginName: undefined,
          status: undefined,
          loginPwd: undefined,
          loginNameConfirm: undefined,
          id: undefined
        },
        // 自定义验证规则
        rules:{
          loginName:[
            { required: true, message: "用户账户不能为空", trigger: "blur" },
            { validator: uniqueName, trigger: "blur" }
          ],
          status:[
            { required: true, message: "状态不能为空", trigger: "change" }
          ],
          loginPwd:[
            { required: true, message: "用户密码不能为空", trigger: "blur" },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          loginNameConfirm:[
            { required: true, message: "确认密码不能为空", trigger: "blur" },
            { validator: validatePass2, trigger: "blur" }
          ]
        }

      }
    },
    methods:{
      // 读取用户状态
      handlerUserStateQuery(){
        userStatus().then( resp => {
          this.statusList= resp.data
        })
      },
      // 条件搜索查询按钮(只能显示第一页的数据)
      handleQuery(){
         this.queryParams.page =1 
         this.fetchData()
      },
      fetchData(){
        list(this.queryParams).then(resp => {
          this.tableData = resp.data.rows
          this.total = resp.data.total
        })
      },
      // 条件搜索重置按钮
      resetQuery(){
        if(this.$refs['queryForm']){
          this.$refs['queryForm'].resetFields();
          // 点击重新查询
          this.handleQuery();
        }
      },
      // 状态改变事件
      handleStatusChange(row){

      },
      // 当每页显示几笔发生变化的时候做事件
      handleSizeChange(val) {
        this.queryParams.size = val
        this.queryParams.page =1
        // 点击重新查询
        this.fetchData();
      },
      // 当前页面发生变化的时候做事件
      handleCurrentChange(val) {
        this.queryParams.page =val
        // 点击重新查询
        this.fetchData();
      },
      // 点击编辑对话框取消提交
      submitForm() {
        // 验证数据是否完整
         this.$refs['form'].validate((valid) => {
            if (valid) {
              this.saveData()
            } else {
              //阻止提交
              return false;
            }
          });
      },
      // 点击编辑对话框取消操作
      cancel(){
        // 重置表单样式
        if(this.$refs['form']){
          this.$refs['form'].resetFields();
        }

        this.form = {
          loginName: undefined,
          status: undefined,
          loginPwd: undefined,
          loginNameConfirm: undefined,
          id: undefined
        }
        // 隐藏表单
        this.open = false
      },
      // 点击了新增按钮
      addForm() {
        this.cancel()

        this.title = '新增数据'
        this.open = true
      }, // 新增或修改保存请求
      saveData(){
        save(this.form).then( resp => {
          if( this.form.id){
             // 如果是修改就刷新当前页
             this.handleQuery()
          }else{
             //如果是新增就应该显示第1页
             this.queryParams.page =1
             this.handleQuery()
          }

          this.open =false
        })
      }

    },
    created() {
      this.handlerUserStateQuery()
      this.fetchData()
    }


  }
</script>

<style>
</style>
